<template>
    <div>
        <Row :gutter="10">
            <i-col :span="12">
                <FormItem  prop="startEndTime">
                <Cascader v-model="startTime" :data="data" size="small" :render-format="(label)=> label.join(':')"
                          transfer @on-change="changeStartDate"></Cascader>
                </FormItem>
            </i-col>
            <i-col :span="12">
                <FormItem   prop="startEndTime">
                <Cascader v-model="endTime" :data="data" size="small" :render-format="(label)=> label.join(':')"
                          transfer @on-change="changeEndDate"></Cascader>
                </FormItem>
            </i-col>
        </Row>
    </div>
    <!--<MJTimeRange style="width: 200px;" v-model="test"></MJTimeRange>{{test}} test: "00:00-24:00"-->
</template>
<script>
    const ruleTimes = () => {
        let m = [];
        for (let i = 0; i <= 50; i += 10) {
            let label = '' + i;
            if (i < 10) {
                label = '0' + i;
            }
            m.push(
                {
                    value: label,
                    label: label
                }
            );
        }
        let h = [];
        for (let i = 0; i <= 24; i++) {
            let label = '' + i;
            if (i < 10) {
                label = '0' + i;
            }
            h.push({
                value: label,
                label: label,
                children: i === 24 ? [{
                    value: '00',
                    label: '00'
                }] : [...m]
            });
        }
        return h;
    }
    export default{
        model: {
            prop: 'value',
            event: 'input'
        },
        props: {
            value: ''
        },
        components: {},
        data: function () {
            let valueArray = this.value ? this.value.split("-") : [null, null]
            console.log(this.value)
            let startArray = valueArray[0] ? valueArray[0].split(":") : null;
            let endArray = valueArray[1] ? valueArray[1].split(":") : null;
            return {
                data: ruleTimes(),
                startTime: startArray,
                endTime: endArray
            }
        },
        computed: {},
        created: function () {

        },
        methods: {
            changeStartDate(value){
                if (value == null || value.length === 0) {
                    this.$emit("input", null);
                    return;
                }
                if (this.endTime == null || this.endTime.length === 0) {
                    this.$emit("input", null);
                    return;
                }
                let changeValue = value[0] + ":" + value[1] + "-" + this.endTime[0] + ":" + this.endTime[1];
                this.$emit("input", changeValue);
                console.log(changeValue)
            },
            changeEndDate(value){
                if (value == null || value.length === 0) {
                    this.$emit("input", null);
                    return;
                }
                if (this.startTime == null || this.startTime.length === 0) {
                    this.$emit("input", null);
                    return;
                }
                let changeValue = value[0] + ":" + value[1] + "-" + this.startTime[0] + ":" + this.startTime[1];
                this.$emit("input", changeValue);
                console.log(changeValue)
            }
        }
    }
</script>
<style>

</style>
